<template>
	<view class="content">
		<view class="head">
			<input class="head_input" v-model="testname" confirm-type="search" @confirm="search()" placeholder="请输入作业名称" />
		</view>
		
		<view class="nav_cont" @touchmove.stop.prevent='moveHandle'>
			<view class="nav_cont_item" @tap="changeNav">
				<view class="nav_item">
					<view class="nav_title" :class="{'nav_title_active': centerNavSwitch}">{{centerNavChar}}</view>
					<i class="iconfont iconfanhui funhui-css" :class="{'sanjiao_css_active':centerNavSwitch}" ></i>
				</view>
			</view>
			<view class="nav_cont_item" @tap="changeNav1">
				<view class="nav_item">
					<view class="nav_title" :class="{'nav_title_active': rightNavSwitch}">发布时间</view>
					<i class="iconfont iconfanhui  funhui-css" :class="{'sanjiao_css_active':rightNavSwitch}" ></i>
				</view>
			</view>
		</view>	
		<view class="empty" style="background: #fff;" v-if="dataPool.length == 0">
			<i class="iconfont iconmeishuju"></i>
			<view class="empty_text">暂无内容</view>
		</view>
		<scroll-view class="scroll-content" scroll-y>
			<view class="content_box" v-for="(item, index) in dataPool" :key="index"> 
				<view class="rectangle">
					<view class="container-flex-row container-item1 jc-sb">
						<view class="container-flex-row">
							<view class="teach-material-title top_title">
								<text class="content_ellipsis">{{item.name}}</text>
								<text class="timeWork_sub">{{item.subject_name}}</text>
							</view> 
						</view>
					</view>
					<view class="line"></view> 
					<view class="container-flex-row container-item1">
						<view class="teach-material-title">发布类型：</view>
						<view class="grey-title">{{ item.type === 1 ?'随堂练习' : item.type === 2 ? '课前作业' : item.type === 3 ? '课后作业' : '预习作业' }}</view>
					</view>
					<view class="line" v-if="item.is_issue == 1"></view> 
					<view class="container-flex-row container-item1" v-if="item.is_issue == 1">
						<view class="teach-material-title">开始时间：</view>
						<view class="grey-title">{{item.start_time}}</view>
					</view>
					<view class="line" v-if="item.is_issue == 1"></view>
					<view class="container-flex-row container-item1 last_contItem" v-if="item.is_issue == 1">
						<view class="teach-material-title">截止时间：</view>
						<view class="grey-title">{{item.end_time}}</view>
					</view>
					<view class="line"></view>
					<view class="go_corr_content">
						<!-- <view class="go_corrected blue" @tap="onCheckReport(item.class_log_id,item.type)">查看报告</view> -->
						<!-- <view class="go_corrected green" @tap="pageRalease(item.homework_log_id,item.name)" v-else>前往发布</view> -->
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 全部类型弹窗 -->
		<view class="pop_bg" catchtouchmove="false" v-if='centerNavSwitch' @tap="closeNavSwitch">
			<view class="pop_bg_item pop_bg_item_center">
				<view class="left_item" v-for="(item2, index2) in allStates" :key="index2" @tap.stop="getCurrentcenter(index2)"	:class="[index2==currentCenterNum?'left_item_active' : '']">
					{{item2.title}}
				</view>
			</view>
		</view>
		<!-- 发布时间弹窗 -->
		<view class="pop_bg" catchtouchmove="false" v-if='rightNavSwitch' @tap="closeNavSwitch">
			<view class="content1">
				<!-- <view class="grey-bg"></view> -->
				<view class="container-flex-row2">选择时间</view>
				<view class="container-flex-row2">
					<view>年</view>
					<view>月</view>
					<view>日</view>
				</view>
				<picker-view v-if="visible" @touchmove.stop :indicator-style="indicatorStyle" :value="value" @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
				
				<view class="w-picker-hd" catchtouchmove="true">
					<view class="w-picker-btn1" @tap="reset">清空</view>
					<view class="w-picker-btn1" @tap="pickerCancel">完成</view>
				</view>
			</view>
		</view>
		<view><uni-load-more v-if="dataPool.length>2" :status="status" :content-text="contentText" /></view>
	</view>
</template>

<script>
	import searchBox from "@/components/search-box/serach-box"
	import util from "@/common/util.js"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	var _this;
	export default {
		data() {
			_this = this;
			/* 时间弹窗开始	 */
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 2000; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				if (i < 10) {
					i = '0' + i;
				}
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				if (i < 10) {
					i = '0' + i;
				}
				days.push(i)
			}
			return {
				leftNavChar: '选择班级', 
				subject: '',
				centerNavChar: '', // nav文字内容显示
				dataPool: [], // 作业记录数据列表
				viceDataPool: [], // 列表副本 处理数据临时存储
				title: 'picker-view',
				homework_log_id: '',//作业记录id
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				/*
				 * 解决动态设置indicator-style不生效的问题
				 */
				visible: true,
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				/*
				 * 时间弹窗结束
				 */
				isTime: true,
				currentCenterNum:0,
				rightNavSwitch: false,
				centerNavSwitch: false,
				allStates: [
					{'title': "全部类型",'stateId':''},
					{'title': "随堂练习",'stateId':'1'},
					{'title': "课前作业",'stateId':'2'},
					{'title': "课后作业",'stateId':'3'}
				],
				testname: '',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				status: 'more',
				page: 1,
				is_issue: 0,
				state: '',
				mytime: '',
				time: '',
				groupid:''
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: 'work-Library'
			})
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page=1;
			this._getDataList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			
		},
		onReachBottom () {
			this.status = 'loading';
			this.page = ++this.page;
			var _this = this;
			setTimeout(function(){
				_this._getDataList();
			}, 500);
		},
		onLoad(e) {
			this.groupid=e.groupid;
			this.class_name = e.class_name
			this._getDataList()
			this._initNav() // 初始化nav状态
		},
		components: {
			searchBox,
			uniLoadMore
		}, 
		methods: {
			forbid:function(is_forbid){
				// #ifdef APP-PLUS
				const pages = getCurrentPages();  
				const page = pages[pages.length - 1];  
				const currentWebview = page.$getAppWebview();  
				currentWebview.setStyle({  
				  pullToRefresh: {  
					support:is_forbid,  
					style: plus.os.name === 'Android' ? 'circle' : 'default'  
				  }  
				});  
				// #endif
			},
			// 搜索z
			search:function(){
				this.page = 1;
				this.reload = true;
				this._getDataList();
			},
			// 班级作业记录[查看报告]跳转到班级作业报告
			onCheckReport(class_log_id, type) {
				// 班级作业记录查看报告跳转到班级作业报告
				uni.navigateTo({
					url: '../workpaper/exam-report?groupid=${this.groupid}&class_log_id=${class_log_id}&class_name=${this.class_name}&type=${type}'
				})
			},
			_initNav() {
				this.centerNavChar = this.allStates[0].title
			},
			_getDataList() {
				// 待发布和已发布作业和试卷列表
				var data = {
					groupid:this.groupid,
					page: this.page,
					pagesize: 8,
					is_exam_type: 1	// 1为作业，2为试卷
				}
				if(this.testname != '') {
					data.name = this.testname;
				}
				if(this.allStates[this.currentCenterNum].stateId!=''){
					data.type=this.allStates[this.currentCenterNum].stateId
				}
				if(this.mytime!=''){
					var time = _this.mytime;
					_this.time = Date.parse(time) / 1000;
					data.update_time = this.time;
				}
				this.$zapi.apiPost('user/Grade.Homework/classLog', data).then(res => {
					if(res.data.code==200){
						let homeworkList = res.data.data.data;
						// console.log(homeworkList);
						for(var i=0; i<homeworkList.length; i++) {
							if(homeworkList[i].start_time != null) {
								homeworkList[i].start_time = util.getFormatTime(homeworkList[i].start_time);
							} else {
								homeworkList[i].start_time = "无记录"
							}
							if(homeworkList[i].end_time != null) {
								homeworkList[i].end_time = util.getFormatTime(homeworkList[i].end_time);
							} else {
								homeworkList[i].end_time = "无记录";
							}
						}
						this.dataPool = this.reload ? homeworkList : this.dataPool.concat(homeworkList);
						
						// 截取科目第一个字来显示就行
						this.dataPool.forEach((item,index) => {
							item.subject_name = item.subject_name.substring(0,1)
						})
						this.viceDataPool = this.reload ? homeworkList : this.viceDataPool.concat(homeworkList);
						this.reload = false;
						this.status='more';
					}else{
						if(this.reload){
							this.dataPool=[];
						}else{
							this.status='noMore';	
						}
					}
				}); 					
			},
			changeNav() {
				this.rightNavSwitch = false
				this.centerNavSwitch = !this.centerNavSwitch
				this.forbid(!this.centerNavSwitch);
			},
			changeNav1() {
				this.mytime= this.year + '/' + this.month + '/' + this.day;
				this.centerNavSwitch = false
				this.rightNavSwitch = !this.rightNavSwitch 
				this.forbid(!this.rightNavSwitch);
			},
			/* 全部类型弹框 */
			getCurrentcenter(index){
				this.currentCenterNum = index
				this.centerNavChar = this.allStates[index].title
				this.centerNavSwitch = false;
				this.page = 1;
				this.reload = true;
				this._getDataList();
				this.forbid(!this.centerNavSwitch);
			},
			/* 关闭弹窗 */
			closeNavSwitch(){
				this.centerNavSwitch = false
				this.rightNavSwitch = false
				this.forbid(true);
			},
			// 时间弹窗事件
			bindChange: function(e) {
				this.value = e.detail.value;
				let val = e.detail.value
				let year = val[0]
				let month = val[1] + 1
				let day = val[2] + 1
				
				// 月份对应天数
				if(month == 2) {
					if(this.isLearYear(year)) {
						this.days = []
						for (let i = 1; i <= 29; i++) {
							if (i < 10) {
								i = '0' + i;
							}
							this.days.push(i)
						}
					} else {
						this.days = []
						for (let i = 1; i <= 28; i++) {
							if (i < 10) {
								i = '0' + i;
							}
							this.days.push(i)
						}
					}
				}
				else if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
					this.days = []
					for (let i = 1; i <= 31; i++) {
						if (i < 10) {
							i = '0' + i;
						}
						this.days.push(i)
					}
				} else {
					this.days = []
					for (let i = 1; i <= 30; i++) {
						if (i < 10) {
							i = '0' + i;
						}
						this.days.push(i)
					}
				}
				let currentSelectTime = '20' + year + '/' + month + '/' + day
				this.mytime = currentSelectTime;
			},
			isLearYear (year) {
				let temp = year - 0
				if(temp % 4 == 0) {
					return true
				} else {
					return false
				}
			},
			reset:function(){
				this.value = [9999, this.month - 1, this.day - 1]
				this.time='';
				this.mytime='';
				this._getDataList();
			},
			pickerCancel:function(e){
				_this.isTime = !_this.isTime;
				_this.page = 1;
				_this.reload = true;
				_this._getDataList();
			}
		}
	}
</script>

<style lang="stylus" scoped>
	// 弹窗内容图标样式
	.iconmeishuju{
		color: #00ACFE;
		font-size: 400upx;
		display: flex;
		justify-content: center;
		align-content: center;
	}
	.empty_text{
		font-size: 38upx;
		color: #999999;
		text-align: center;
		margin-top: -200upx;
	}
	
	// 内容溢出样式
	.content_ellipsis{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		max-width: 80%;
		display: inline-block;
	}
	
	.head{
		padding: 30upx;
		background: #ffffff
	}
	.head_input{
		background #f3f3f3
		height 60upx
		line-height 60upx
		border-radius 12upx
		text-align center
	}
	.pop_bg2 {
		position: absolute;
		z-index: 600;
		width: 100%;
		height: 102%;
		top: 0upx;
		background-color: rgba(0, 0, 0, .5);
	}
	.pop_bg_item1 {
		position: absolute;
		top: 16upx;
		right: 10upx;
		width:300upx;
		border-radius: 10upx;
		background-color: #ffffff;
	}
	.pop_bg_item1:before {
		content: "";
		position: absolute;
		top: -30upx;
		right: 20upx;
		margin-left: 330upx;
		/* background-color: red; */
		display: inline-block;
		border-width: 18upx;
		border-style: solid;
		border-color: white transparent transparent transparent;
		transform: rotate(180deg);
	}
	.iconjiahao2{
		margin-right: 30upx;
	}
	.left_item {
		display: flex;
		justify-content: center;
		position: relative;
		width: 100%;
		font-size: 32upx;
		line-height: 60upx;
		padding: 15upx 0;
		border-bottom: 1px solid #e5e5e5;
		color: #858585;
	}
	.left_item:last-child {
		border: none;
	}
	
	.timeWork_sub{
		display: inline-block;
		position: absolute;
		top:7px;
		width: 38upx; 
		height: 36upx; 
		background-color: #00ACFE;
		line-height: 19px;
		font-size: 24upx;
		color: white; 
		text-align: center;
		margin-left: 10upx;
		border-radius: 8upx;
	}
	.top_title{
		position: relative;
		width: 348px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.green_btn{
		background-color #00D5A2
	}
	
	.item_center_type
		position: relative; 
		width: 100%;
		background-color: #fff;
		border-radius: 2px;
		.left_item
			display flex
			justify-content center
			position relative
			width 100%
			font-size 28upx
			padding 15upx 0
			border-bottom 1px solid #e5e5e5
			color #858585
		.left_item:last-child
			border none
		
		.left_item_activeFi
			color #00adff
		.left_item_active
			color #00adff
		.left_item_active:after
			content ""
			position absolute
			right 40upx
			top 25upx
			width 28upx
			height 28upx
			background-image url("../../static/image/tick.png")
			background-size 100% 100%
	
	.content
		position absolute
		width 100%
		background-color #f3f3f3
		.scroll-content
			height 100%
			.content_box
				.grey_time
					color #999999
					display relative
					height 56upx
					line-height 56upx
					font-size 22upx
					margin-left 20upx
					margin-bottom -20upx
				.rectangle 
					height auto
					background #ffffff
					margin-top 20upx 
					border-radius 6upx 
					.container-flex-row
						display flex
						flex-direction row
						align-items center
					.jc-sb
						justify-content space-between
					.container-item1
						width 690upx
						height 92upx
						margin-left 30upx
						border-bottom 1px solid #E5E5E5
						.teach-material-title 
							font-size 34upx 
							color #666666
						.grey-title
							font-size 34upx
							color #666666
						
						.blue_title
							font-size 24upx
							color #00adff
						.top_title
							font-weight 500
							font-size 36upx !important
							font-size Medium
							color #333333
						.yu-item
							width 30upx
							height 30upx
							background #00adff
							border-radius 6upx
							color #ffffff
							font-size 22upx
							display flex
							justify-content center
							align-items center
							margin-left 16upx
						.not-corrected
							color #f10000
						.end-corrected
							color #00d555
						.not-publish
							color #00adff
						.status-size 
							font-size 34upx
					
					.go_corr_content
						display flex
						height 120upx
						flex-direction row-reverse
						.go_corrected
							width 180upx
							height 60upx
							line-height 60upx
							margin-top 30upx
							margin-right 30upx
							color #ffffff
							text-align center 
						
						.orange
							display block
							background #ff9000
						.blue
							display block
							background #00adff
						.green
							display block
							background #00D5A2
						.line
							width 710upx
							border-bottom 1px solid #eeeeee
							margin 0 auto
			
	.nav_cont
			display flex
			height 80upx
			background #ffffff
			
			.nav_cont_item
				display flex
				align-items center
				justify-content center
				width 50%
				.nav_item
					display flex
					align-items center
					justify-content center
					width 246upx
					margin 0 auto
					.nav_icon
						font-size 35upx
						color #00adff
					.nav_title
						font-size 30upx
						margin-left 10upx
						color #666666
					.funhui-css 
						color:#666666;
						transform: rotate(90deg);
						margin-left: 14upx;
					
					.nav_title_active
						color #00adff
					.sanjiao_css
						color #999999
					.sanjiao_css_active
						color #00adff
	.time_show 
		display none
	.pop_bg
		position absolute
		z-index 600
		width 100%
		top 183upx
		// height 100%
		height 10000px
		background-color rgba(0, 0, 0, .5)
		.pop_bg_item:before
			// content ""
			// position absolute
			// display inline-block
			// border-width 18upx
			// border-style solid
			// border-color white transparent transparent transparent
			// transform rotate(180deg)
			// top -30upx
		.pop_bg_item_left:before
			left 45%
		.pop_bg_item_left
			float left
		.pop_bg_item_center:before
			left 45%
		.pop_bg_item_center
			float left
		.pop_bg_item_right:before
			right 45%
		.pop_bg_item_right
			float right
		.pop_bg_item
			position relative
			margin-top 0upx
			width 100%
			background-color #ffffff
			border-radius 5upx
			.left_item
				display flex
				justify-content flex-start
				position relative
				width 100%
				font-size 28upx
				padding 15upx 0
				border-bottom 1px solid #e5e5e5
				color #858585
				text-indent 114upx
			.left_item:last-child
				border none
			
			.left_item_activeFi
				color #00adff
			.left_item_active
				color #00adff
			.left_item_active:after
				content ""
				position absolute
				right 40upx
				top 25upx
				width 28upx
				height 28upx
				background-image url("../../static/image/tick.png")
				background-size 100% 100%
				
			.center_item
				display flex
				justify-content center
				position relative
				width 100%
				font-size 28upx
				padding 15upx 0
				border-bottom 1px solid #e5e5e5
				color #858585
			.center_item:last-child
				border none
	
			/* 时间弹窗开始 */
		.pop_bg {
			width: 100%;
			// height: 100%;
			z-index: 999;
			position: absolute;
			background: rgba(0, 0, 0, .5);
		}
		
		.content1 {
			width:750upx;
			height: auto;
			background: #FFFFFF;
			margin:0upx auto;
		}
		.uni-padding-wrap{
			color: #00ADFF;
			font-size: 36upx;
			width:750upx;
			display: flex;
			justify-content: center;
		}
		.uni-title {
			margin-left: -30upx;
		}
		.xuanze{
			margin-left:12upx;
			margin-top:8upx;
			font-size:40upx;
		}
		
		.container-flex-row2 {
			display: flex;
			justify-content: space-around;
			flex-direction: row;
			height:60upx;
			align-items: center;
		}
		
		picker-view{
			width:750upx;
			height: 300upx;
		}
		
		.item {
			text-align: center;
			line-height: 100upx;
		}
		
		.grey-bg {
			width:750upx;
			height: 10upx;
			background: #f3f3f3;
		}
		
		.w-picker-hd {
			height:100upx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items:center;
			color:#00adff;
			border-top:1px solid #f3f3f3;
		}
		.w-picker-btn1:first-child{
			color:#333333;
			border:none !important;
		}
		.w-picker-btn1{
			height:50upx;
			width:50%;
			font-size:30upx;
			// border:1px solid red;
			border-left:1px solid #f3f3f3;
			text-align: center;
			line-height:50upx;
		}
		/* 时间弹窗结束 */			
		
</style>
